<template>
  <v-card>
    <v-card-text> 
      <p>{{article}}</p>
        <div class="text-center">
          <v-pagination v-model="page" :length="6"  @input="handlechange" ></v-pagination>
        </div>
            </v-card-text>
          </v-card>
</template>
<script>
  export default {
    data () {
      return {
        page: 1,
        article:''
      }
    },
  computed:{
    
  },
  methods:{
    handlechange(){
      let self = this
      // 显示pagination的页数
      console.log(self.$data.page);
       this.$axios({
       methods:'get',
       url:`/api/fiction/${self.$data.page}`,
       params:{
         id:self.$data.page
       }
     }).then(res=>{
       console.log(res);
       this.article = res.data.article
     })
    },
    getfirstArticle(){
     this.$axios({
       methods:'get',
       url:'/api/fiction/1',
       params:{
         id:1
       }
     }).then(res=>{
       console.log(res);
       this.article = res.data.article
     })
    }
  },
  mounted(){
    setTimeout(this.getfirstArticle,1000)
  }
  }

</script>